<template>
	<view
		class="x__btn"
		@click="handleClick"
		hover-class="u-navbar__content__left--hover"
		hover-start-time="150"
	>
		<slot v-if="!right"></slot>
		{{ text }}
		<slot v-if="right"></slot>

		<button open-type="share" v-if="share" class="u-reset-button share__btn"></button>
	</view>
</template>

<script>
export default {
	name: 'x-btn',
	props: {
		text: {
			type: String,
			default: ''
		},
		right: {
			type: Boolean,
			default: false
		},
		share: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {
		handleClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.x__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	cursor: pointer;
	height: 100%;

	position: relative;
	.share__btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
}
</style>
